<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 电商平台</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航栏 -->
        <header class="header">
            <div class="header-back">
                <i class="fas fa-arrow-left"></i>
            </div>
            <h1 class="header-title">首页模板</h1>
            <div class="header-right"></div>
        </header>

        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 广告横幅 -->
            <section class="banner">
                <img src="https://picsum.photos/id/366/800/300" alt="夏季防晒套装" class="banner-image">
                <div class="banner-text">
                    <h2>夏季防晒套装</h2>
                    <p>低至99元/套</p>
                    <button class="banner-btn">立即抢购</button>
                </div>
            </section>

            <!-- 功能导航图标 -->
            <section class="function-nav">
                <div class="function-item">
                    <div class="function-icon blue">
                        <i class="fas fa-shopping-bag"></i>
                    </div>
                    <span>镇店爆款</span>
                </div>
                <div class="function-item">
                    <div class="function-icon purple">
                        <i class="fas fa-yen-sign"></i>
                    </div>
                    <span>今日推荐</span>
                </div>
                <div class="function-item">
                    <div class="function-icon red">
                        <i class="fas fa-heart"></i>
                    </div>
                    <span>满减专区</span>
                </div>
                <div class="function-item">
                    <div class="function-icon pink">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                    <span>新品尝鲜</span>
                </div>
            </section>

            <!-- 第二行功能图标 -->
            <section class="function-nav">
                <div class="function-item">
                    <div class="function-icon red">
                        <i class="fas fa-ticket-alt"></i>
                    </div>
                    <span>领券中心</span>
                </div>
                <div class="function-item">
                    <div class="function-icon green">
                        <i class="fas fa-apple-alt"></i>
                    </div>
                    <span>休闲零食</span>
                </div>
                <div class="function-item">
                    <div class="function-icon cyan">
                        <i class="fas fa-glass-cheers"></i>
                    </div>
                    <span>酒水饮品</span>
                </div>
                <div class="function-item">
                    <div class="function-icon yellow">
                        <i class="fas fa-seedling"></i>
                    </div>
                    <span>坚果炒货</span>
                </div>
            </section>

            <!-- 优惠活动区域 -->
            <section class="promotion">
                <div class="promotion-banner">
                    <img src="https://picsum.photos/id/292/800/200" alt="春夏嗨购" class="promotion-image">
                    <div class="promotion-text">
                        <h3>春夏嗨购</h3>
                        <p>全场下单满99减50</p>
                        <button class="promotion-btn">GO</button>
                    </div>
                </div>
            </section>

            <!-- 新人专区 -->
            <section class="new-user">
                <div class="new-user-header">
                    <h3>时尚好物 新人专区</h3>
                    <span class="new-user-link">新人专享 <i class="fas fa-chevron-right"></i></span>
                </div>
                <p class="new-user-subtitle">全场满38元包邮</p>
            </section>

            <!-- 底部广告 -->
            <section class="bottom-banner">
                <div class="bottom-banner-left">
                    <p>优惠更多、心意不减</p>
                </div>
                <div class="bottom-banner-right">
                    <img src="https://picsum.photos/id/431/200/100" alt="特惠商品">
                    <div class="bottom-banner-text">
                        <p>24小时配送保障</p>
                        <p>特惠价129元</p>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <script src="script.js"></script>
</body>
</html>